# 内容型个人网站设计规范 V1.0

> 目标：建立一种长期可维护、低视觉噪音、高信息效率、阅读友好的个人网站设计体系。
>
> 关键词不是“极简”，而是：
>
> **高信息价值 + 低视觉噪音。**

---

# 一、核心设计哲学

网站不是广告海报。

网站不是设计 Demo。

网站也不是为了展示：

> “我会多少技术。”

真正目标：

> 用户能够舒服地找到、理解、浏览和使用内容。

---

# 二、极简 ≠ 简陋

禁止把“极简”理解成：

- 大量空白；
- 一个巨型标题；
- 几张卡片；
- 一个 CTA；
- 页面几乎没有实际信息。

这属于：

> Demo Minimalism。

真正的极简是：

> 删除无意义的信息，但保留完整功能。

所以：

### 可以信息丰富。

但不能：

### 视觉嘈杂。

---

# 三、像书，而不是模仿书

网站阅读体验借鉴成熟出版物：

- 字号；
- 行距；
- 段落；
-页边距；
-层级；
-章节感；
-目录；
-索引；
-阅读节奏。

但必须保留网站优势：

-搜索；
-导航；
-超链接；
-动态信息；
-相关推荐；
-即时跳转；
-回退路径。

目标：

> 用户像看书一样自然，却拥有比书更强的信息导航能力。

---

# 四、禁止广告式标题滥用

例如：

用户已经进入：

`/blog`

页面顶部再使用：

# BLOG

占据屏幕 30%～50%。

这是典型的信息重复。

用户已经知道自己在哪里。

标题必须承担信息任务。

判断标准：

> 删除这个标题之后，用户是否损失信息？

如果答案是：

> 没有。

则降低它的视觉等级或删除。

---

# 五、任何页面都必须可回退

禁止：

首页 → 音乐 → 专辑 → 歌曲

然后只能依赖：

浏览器返回键。

网站内部必须提供自然导航：

- Logo → 首页；
- Breadcrumb；
- 上一级；
- 同级导航；
-相关推荐。

用户任何时候都应该知道：

> 我在哪里。

> 我怎么来的。

> 我还能去哪。

---

# 六、主导航遵循“真实内容原则”

导航不是未来规划表。

导航只显示目前真正具有内容价值的栏目。

推荐分类逻辑：

## Project / 项目

特点：

-针对某个明确目标；
-完整作品；
-有明确边界；
-有开始与结果。

---

## Resource / 资源

特点：

-通用；
-可复用；
-不依赖某个项目。

例如：

-工具；
-网站；
-模板；
-Prompt；
-字体；
-组件；
-资料；
-链接收藏。

---

## Demo / 演示

特点：

-独立视觉效果；
-交互效果；
-HTML Demo；
-创作过程中产生的小作品；
-不是完整项目；
-不准备继续开发。

可以：

-在线查看；
-下载；
-查看源码。

但不要包装成完整项目。

---

## Docs / 文档

特点：

解决问题。

例如：

-AI 协作框架；
-工作流；
-方法论；
-操作说明；
-开发经验；
-规则模板；
-技术说明。

用户访问目的：

> 我要找到答案。

---

## Diary / 日记

日记只负责记录。

不强迫它：

-教学；
-SEO；
-知识输出；
-方法论；
-商业价值。

日记可以只是：

> 今天发生了什么，我是怎么想的。

这与文档必须分开。

---

## About / 关于

解决：

> 这个网站是谁做的？

> 为什么存在？

> 作者是谁？

而不是写成企业宣传册。

---

# 七、没有内容不要造栏目

宁缺勿滥。

如果栏目只有：

1 个页面。

甚至没有内容。

不要为了：

> 看起来像完整网站

把它放到主导航。

网站应该像树：

> 内容先长出来，枝条才出现。

---

# 八、首页不是仓库

首页承担三个任务：

### 1. 让我知道这里是什么
### 2. 让我看到最近有什么
### 3. 告诉我下一步去哪

不要承担：

> 展示网站所有内容。

---

# 九、首页推荐结构

推荐：

```text
┌──────────────────────────────────────────────┐
│ Logo       项目  文档  日记  资源  关于      │
├─────────────────────┬────────────────────────┤
│                     │ Clock                  │
│                     ├────────────────────────┤
│     主内容区域       │ 站长信息               │
│                     ├────────────────────────┤
│                     │ 更新日历               │
│                     ├────────────────────────┤
│                     │ 最近访客               │
│                     │                        │
└─────────────────────┴────────────────────────┘
```

右侧栏不是控制台。

它属于：

> Quiet Context Layer

安静的信息上下文层。

用户可以看，也可以完全忽略。

---

# 十、右侧时钟

允许存在。

它并非核心功能，却可以承担：

-个性；
-品牌记忆；
-时间感；
-网站生命感。

设计建议：

-小；
-机械感；
-黑白；
-红色秒针；
-适度阴影；
-不做夸张动画。

原则：

> 它可以无用，但不能碍事。

---

# 十一、更新日历

这是非常值得保留的特色组件。

功能定义不是：

> 普通日历。

而是：

# 网站时间轴 / Freshness Map

例如：

```text
August 2026

M T W T F S S
        1 2
3 4 5 ● 7 8 9
10 ● 12 13 14 15 16
17 18 19 ● 21 22 23
```

绿色点：

> 当天存在新内容。

Hover / Tap：

```text
8 月 20 日

新增文章
《为什么 AI 越做越像 Demo》

新增项目
Music Player V1
```

只展示：

> 用户关心的更新。

不要展示：

-修 CSS；
-改按钮；
-修 typo；
-后台调整。

---

# 十二、实时更新原则

如果用户正在浏览网站时出现新内容：

禁止：

-弹窗；
-toast 疯狂提醒；
-声音；
-强制刷新；
-闪烁通知。

推荐：

> 一个很轻的绿色点亮起。

或者：

> “15:32 新增 1 篇内容”

像朋友圈出现新动态一样：

> 网站活着，但不打扰我。

这是网站的：

# Presence / 在场感

---

# 十三、资源页设计

资源页不是链接垃圾场。

每个资源至少包含：

```text
[Icon]

Product Name

官方介绍：
官方的一句话定位。

我的备注：
为什么我留下它。
```

官方介绍负责：

> 它是什么。

你的备注负责：

> 为什么值得看。

这会让资源页从：

“收藏夹”

升级为：

“判断库”。

---

# 十四、视觉体系

主题只保留三套：

### Light
白色阅读。

### Dark
黑色阅读。

### Eye Care
护眼阅读。

不要混搭成五颜六色的页面。

三套主题：

-布局相同；
-层级相同；
-尺寸相同；
-功能相同。

只改变颜色系统。

首次访问可以跟随系统主题。

用户手动选择后：

> 优先记住用户选择。

---

# 十五、视觉语言

默认：

-直角；
-少圆角；
-无玻璃拟态滥用；
-无巨大渐变；
-无霓虹背景；
-无无意义光效；
-无自动轮播；
-无大片 Hero 广告设计。

强调：

-排版；
-留白；
-字体；
-边界；
-比例；
-对齐；
-节奏。

---

# 十六、字体

如果拥有自己的字体：

不要全站滥用。

建议：

品牌字体：
- Logo；
-标题；
-少量重点。

正文：

必须优先保证阅读。

字体属于：

> 品牌味道。

不能牺牲：

> 阅读效率。

---

# 十七、页面设计判断公式

增加任何元素之前，问：

### 它告诉用户什么？

### 用户什么时候需要它？

### 删除它有什么损失？

如果：

> 没损失。

删除。

如果：

> 偶尔需要。

降低视觉权重。

如果：

> 完成任务必须。

提高权重。

---

# 十八、最终设计目标

不是：

> 用户觉得这个网站设计真厉害。

而是：

> 用户几乎意识不到设计的存在，却一直知道该怎么用。

这才是长期耐看的设计。